<template>
	<view>
		<view class="content" :style="{height: iContentHeight}">
			<view class="poster-background-view">
				<!-- <canvas class="canvas" canvas-id="poster"></canvas> -->
				<!-- <painter class="painter" :palette="painterData" @imgOK="onImgOK" @imgErr="onImgErr" /> -->
			</view>
		</view>
		<view class="share-blank-view" :style="{paddingBottom: safeAreaInsetsBottom}">
		
		</view>
		<!-- <view class="share-footer-view" :style="{paddingBottom: safeAreaInsetsBottom}">
			<button class="footer-button-item" open-type="share" type="default">
				<image class="footer-button-item-image" src="../../static/share/wechat.png" mode="aspectFit"></image>
				<view class="footer-button-item-title util-font-medium">分享给好友</view>
			</button>
			<view class="footer-button-item" @click="saveImage">
				<image class="footer-button-item-image" src="../../static/share/save_to_image.png" mode="aspectFit"></image>
				<view class="footer-button-item-title util-font-medium">保存图片</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		computed:{
			iContentHeight(){
				let systemInfo = uni.getSystemInfoSync();
				console.log(systemInfo)
				
				let windowHeight = systemInfo.windowHeight;
				console.log(windowHeight)
				
				let bottomHeight = this.$util.systemRect().safeAreaBottomHeight + uni.upx2px(200);
				console.log(bottomHeight)
				
				return (windowHeight - bottomHeight) + 'px'
			},
			safeAreaInsetsBottom() {
				return uni.getSystemInfoSync().safeAreaInsets.bottom + 'px'
			}
		},
		data() {
			return {
				painterData: {},
				text: '12312321321',
				painterImageUrl: '',
				
			}
		},
		onLoad() {
			// this.painterData = this.getPainterData()
			// uni.showLoading({
			// 	title: '正在生成海报...'
			// })
		},
		methods: {
			getPainterData: function(){
				
				return {
					background: '#FFFFFF',
					width: '640rpx',
					height: '800rpx',
					borderRadius: '20rpx',
					views: [{
							type: 'image',
							url: 'https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/pic/product/1582698435414-88333-Ubux5rHD0knmL6rc0rhpmAB3FRe1Uj84jRSsehju.jpeg',
							css: {
								left: '0rpx',
								top: '0rpx',
								width: '640rpx',
								height: '640rpx',
								mode: 'aspectFill',
								borderRadius: '20rpx',
							},
						},
						{
								type: 'image',
								url: 'https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/pic/product/1582698435414-88333-Ubux5rHD0knmL6rc0rhpmAB3FRe1Uj84jRSsehju.jpeg',
								css: {
									left: '30rpx',
									top: '670rpx',
									width: '100rpx',
									height: '100rpx',
									mode: 'aspectFill',
									borderRadius: '50rpx',
								},
							},
						{
							type: 'text',
							text: '小强邀请您开启赚钱特权',
							css: {
								left: '150rpx',
								top: '700rpx',
								fontFamily: 'PingFangSC-Medium',
								fontSize: '38rpx',
								color: '#333333',
							}
						},
					]
				}
				
			},
			onImgOK: function(e) {
				uni.hideLoading()
			
				console.log(JSON.stringify(e))
				this.painterImageUrl = e.detail.path
				console.log(this.painterImageUrl)
			},
			onImgErr: function(e) {
				uni.hideLoading()
				
				uni.showModal({
					content: '生成海报失败',
					showCancel: false
				});
			},
			saveImage: function(){
				uni.saveImageToPhotosAlbum({
					filePath: this.painterImageUrl,
					success: function() {
						uni.showModal({
							title: '海报已保存到您的系统相册',
							showCancel: false
						});
					},
					fail: () => { 
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style>
	.content
	{
		width: 100%;
		background-color: #F5F5F5;
		overflow: hidden;
	}
	/* 商品海报 */
	.poster-background-view {
		width: 640upx;
		height: 800upx;
		text-align: center;
		margin: 55upx;
		border-radius: 20upx;
	}
	.painter {
		width: 100%;
		height: 100%;
	}
	
	.share-blank-view {
		width: 100%;
		height: 200upx;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.share-footer-view {
		width: 100%;
		height: 200upx;
		background-color: white;
		border-top: 2upx solid #F1F1F1;
		padding-bottom: env(safe-area-inset-bottom);
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		/* flex布局 */
		display: -webkit-flex; /* Safari */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.footer-button-item {
		width: 200upx;
		height: 200upx;
		text-align: center;
	}
	.footer-button-item-image {
		width: 100upx;
		height: 100upx;
		margin-top: 30upx;
	}
	.footer-button-item-title {
		width: 200upx;
		text-align: center;
		height: 40upx;
		line-height: 40upx;
		color: #333333;
		font-size: 28upx;
	}

	button {
		border-radius: 0;
		padding-left: 0;
		padding-right: 0;
	}
	button.footer-button-item {
		background-color: white;
		line-height: 40upx;
		position: static;
		margin: 0;
	}
	
</style>
